<template>
  <div class="card">
    <div class="metroCard" v-if="!cardList">
      <van-sticky>
        <div class="detailHeader">
          <van-icon name="arrow-left" @click="back" class="backIcon" />
          <div></div>
        </div>
      </van-sticky>
      <h1>领卡</h1>
      <van-form @submit="onSubmit">
        <van-field
          v-model="idCard"
          name="idCard"
          label="身份证号"
          placeholder="请输入身份证号"
          :rules="[
            { required: true, message: '请填写身份证号' },
            {
              pattern:
                /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
              message: '请输入正确的身份证号码',
            },
          ]"
        />
        <van-field
          v-model="phonenumber"
          name="phonenumber"
          label="联系电话"
          placeholder="请输入联系电话"
          :rules="[
            { required: true, message: '请填写联系电话' },
            { pattern: /^1[3|4|5|7|8]\d{9}$/, message: '请输入正确的手机号' },
          ]"
        />
        <van-field
          v-model="userName"
          name="userName"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
    <div v-else class="metroCard">
      <van-sticky>
        <div class="detailHeader">
          <van-icon name="arrow-left" @click="back" class="backIcon" />
          <div></div>
        </div>
      </van-sticky>
      <h1>乘车码</h1>
      <p>(数据里没码)</p>
      <p>用户名：{{ cardList.userName }}</p>
      <p>领卡时间：{{ cardList.createTime }}</p>
      <van-button type="danger" @click="deleteCard(cardList.id)"
        >注销乘车码</van-button
      >
    </div>
  </div>
</template>

<script>
import { CardMessageApi } from "@/service/metro/metroservice.js";
import { CardReceiveApi } from "@/service/metro/metroservice.js";
import { CardDeleteApi } from "@/service/metro/metroservice.js";
export default {
  data() {
    return {
      cardList: [],
      idCard: "",
      phonenumber: "",
      userName: "",
    };
  },
  methods: {
    async getCardMessage() {
      let { data } = await CardMessageApi();
      console.log(data);
      this.cardList = data.data;
    },
    async onSubmit(val) {
      let { data } = await CardReceiveApi(val);
      if (data.code == 200) {
        this.getCardMessage()
      }
    },
    back() {
      this.$router.push({ path: "/metro" });
    },
    async deleteCard(num) {
      console.log(num);
      let { data } = await CardDeleteApi(num);
      if (data.code == 200) {
        this.cardList = [];
        this.getCardMessage();
      }
    },
  },
  created() {
    this.getCardMessage();
  },
};
</script>

<style lang="scss" scoped>
.metroCard {
  h1 {
    font-size: 24px;
    text-align: center;
    margin-top: 10px;
  }
  .detailHeader {
    background-color: #fff;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .backIcon {
      font-size: 20px;
    }
  }
}
</style>